<template>
  <div class="box">
    <div class="grow-header">
      <router-link to="/time" tag="i" class="iconfont icon-fanhui"></router-link>
      <h2>编辑宝宝信息</h2>
    </div>
    <mt-field label="昵称" placeholder="请输入宝宝的名字" v-model="username"></mt-field>
    <mt-field label="生日" placeholder="请输入生日" type="date" v-model="birthday"></mt-field>
    <button @click="btn">确认</button>
  </div>
</template>

<script>
import Vue from 'vue'
import axios from 'axios'
import { Field } from 'mint-ui'
Vue.component(Field.name, Field)
export default {
  data () {
    return {
      username: '',
      birthday: '',
      photo: ''
    }
  },
  methods: {
    btn () {
      axios.post('http://10.8.162.9:8081/byby/updateByby.do', {
        token: 'McjUBDjSAPiRmii/0a03pV+hf1QUDwYu0FD8RQH7Ao3rjFJwqmLYlkXfIhgZTawXiyZReSxV4j9oeFe60XQUjC6wiY+jPV2cz1R6O0lt+cQ0qqyDNpre3gA1dinsiLPt06OX2vC/h4XuRtQ3cQbg5vZDvkhG7redM0KiX4e9PJdSJyuVyla7ItV9jOHGvHRGHzr7pcJEgd8wmmO4uCamJw==',
        name: this.username,
        time: this.birthday,
        babymedia: this.photo
      })
        .then((response) => {
          console.log(response.data)
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.grow-header {
  @include rect(100%, 0.42rem);
  background: #f8eaca;
  line-height: 0.42rem;
  i {
    float: left;
    font-size: 0.16rem;
    width: 0.3rem;
    text-align: center;
    font-weight: 700
  }
  h2 {
    float: left;
    width:80%;
    text-align: center;
    font-size: 0.16rem;
    font-weight: 500;
  }
}
button {
  margin-top: 0.1rem;
  height: 0.35rem;
  border: none;
  background: #f8eaca;
  font-size: 0.14rem;
  color: #696969;
}
</style>
